<template>
	<view class="order">
		<!-- 列表 -->
		<view class="listBox">
			<view class="" v-if="type=='agreement'">
				<view class="agree" v-for="(item,index) in agree" :key="index"
					@tap.stop="Jump(item.path)">
					<view class="list_t">
						<image :src="item.url" mode=""></image>
						<view class="list_t_r">
							<view class="list_t_r_t flex-r-b-c">
								<view class="name">{{item.title}}</view>
							</view>
						</view>
					</view>
					<u-icon name="arrow-right" size="20" color="#B6B6B6"></u-icon>
				</view>
			</view>

			<view class="" v-if="type!='agreement'">
				<view class="list" v-for="(item,index) in list" :key="index"
					@tap.stop="Jump(`/pages/my/remarkMessage?type=${item.id}`)">
					<view class="list_t">
						<image :src="item.url" mode=""></image>
						<view class="list_t_r">
							<view class="list_t_r_t flex-r-b-c">
								<view class="name">{{item.title}}</view>
							</view>
							<view class="time">{{item.content}}</view>
						</view>
					</view>
					<view class="" style="display: flex;">
						<view class="" style="padding: 20rpx;height: 40rpx;box-sizing: border-box;">
							<u-tag :text="item.num" type="error" shape="circle" style="height: 100%;" mode="dark"
								v-if="item.num != 0" />
						</view>
						<u-icon name="arrow-right" size="20" color="#B6B6B6"></u-icon>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		messageList
	} from "@/request/myApi.js";
	export default {
		data() {
			return {
				list: [{
						id: 1,
						url: '/static/my/remark.png',
						title: '提醒消息',
						des: '回复消息'
					},
					{
						id: 2,
						url: '/static/my/answer.png',
						title: '系统公告',
						des: '如何建立良好的客户关系'
					}
				],
				agree: [{
						id: 1,
						url: '/static/my/remark.png',
						title: '注册协议',
						path:'/pages/my/agreement?name=zcxy'
					},
					{
						id: 2,
						url: '/static/my/answer.png',
						title: '隐私协议',
						path:'/pages/my/agreement?name=ysxy'
					}
				],
				type: ''
			};
		},
		onLoad(e) {
			this.type = e.type
			wx.setNavigationBarTitle({
				title: this.type == 'agreement'?'我的协议':'我的消息'
			})
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList() {
				let that = this
				messageList().then((res) => {
					if (res.code == 200) {
						that.list = that.list.map((item, index) => {
							return {
								...item,
								num: res.data[index].num,
								content:res.data[index].content
							}
						})
					}else{
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
				});
			},
			Jump(url) {
				console.log('111111111')
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		// background-color: #f9f9f9;
	}

	.u-tab-bar {
		display: none !important;
	}

	.chooseCup {
		margin-right: 8rpx !important;

		image {
			width: 20rpx !important;
			height: 12rpx !important;
			margin: 14rpx;
		}
	}

	.order {
		width: 100vw;

		.tabBox {
			width: 100%;
		}

		.listBox {
			width: 95%;
			margin: 30rpx auto;
			
			.agree {
				width: 100%;
				height: auto;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: 20rpx auto;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid rgba(217, 217, 217, 0.4);
			
				.list_t {
					display: flex;
					flex: 1;
			
					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}
			
					.list_t_r {
						width: 70%;
						height: 6rpx;
						margin-left: 30rpx;
						padding: 4rpx;
						box-sizing: border-box;
			
						.list_t_r_t {
							font-size: 30rpx;
							font-weight: 400;
			
							.name {
								margin-top: 6rpx;
							}
						}
					}
				}
			}

			.list {
				width: 100%;
				height: auto;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: 20rpx auto;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid rgba(217, 217, 217, 0.4);

				.list_t {
					display: flex;
					flex: 1;

					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}

					.list_t_r {
						width: 70%;
						height: 90rpx;
						margin-left: 30rpx;
						padding: 4rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						box-sizing: border-box;

						.list_t_r_t {
							font-size: 28rpx;
							font-weight: 400;

							.name {
								margin-top: 6rpx;
							}
						}

						.time {
							font-size: 24rpx;
							font-weight: 400;
							color: #979797;
						}
					}
				}
			}
		}
	}
</style>